<template>
  <div class="out">
    <zHeader pageTitle="小区户型"></zHeader>
    
    <div class="pageOut">
      <div class="swipeArea">
        <van-swipe class="my-swipe" :autoplay="30000" lazy-render :show-indicators="false" @change="getSwipeIndexHandler">
          <van-swipe-item v-for="(item, index) in apartmentTypeData" :key="index">
            <div class="swipeItemOut">
              <div class="apartmentTypeImageOut">
                <img class="apartmentTypeImage" :src="item.urls" @click="imagePreviewHandler(item.urls)">
                <!-- 指南针样式 -->
                <!-- <div class="directionArea">
                  <div class="tipText">N</div>
                  <svg class="directionIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="24" height="24" style="" filter="none">
                    <g>
                    <path d="M16 29v0c-7.18 0-13-5.82-13-13s5.82-13 13-13c7.18 0 13 5.82 13 13s-5.82 13-13 13zM16 28c6.627 0 12-5.373 12-12s-5.373-12-12-12c-6.627 0-12 5.373-12 12s5.373 12 12 12v0zM18.121 18.121c-1.768 1.768-9.192 4.95-9.192 4.95s3.182-7.425 4.95-9.192c1.768-1.768 9.192-4.95 9.192-4.95s-3.182 7.425-4.95 9.192v0zM14.62 14.6c-1.414 1.414-3.606 6.435-3.606 6.435s5.020-2.192 6.435-3.606l-2.828-2.828z" fill="rgba(16,16,16,1)"></path>
                    </g>
                  </svg>
                </div> -->
              </div>
              <div class="tipArea">
                <div class="tipItem">户型：{{ item.huXing }}</div>
                <div class="tipItem">房屋朝向：{{ item.fangWuChaoXiang }}</div>
                <div class="tipItem">建筑面积：{{ item.jianZhuMianJi }}</div>
              </div>
              <div class="jingZhuangNavBtn" v-if="item.jingZhuangYangBanGuanLianList && item.jingZhuangYangBanGuanLianList.length > 0">
                <img class="jingZhuangNavBtnImage" :src="jingZhuangNavBtnImage" @click="navToJingZhuangHandler(item.jingZhuangYangBanGuanLianList)">
              </div>
              <div class="bottomIndicator"></div>
            </div>
          </van-swipe-item>
          <template #indicator="{ active, total }">
            <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
          </template>
        </van-swipe>
      </div>
      
      <div class="houseInfoArea" v-if="apartmentTypeData && apartmentTypeData[showIndex]" :key="houseInfoKey">
        <section class="houseInfoItemCard houseBasicCard">
          <div class="titleArea">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="23" height="23" style="" filter="none">
              <g>
              <rect width="48" height="48" fill="rgba(24,126,255,1)" fill-opacity="0.01" stroke="none"></rect><path d="M9 18V42H39V18L24 6L9 18Z" fill="none"></path><path d="M9 42V18L4 22L24 6L44 22L39 18V42H9Z" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M19 29V42H29V29H19Z" fill="none" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linejoin="round"></path><path d="M9 42H39" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" fill="none"></path>
              </g>
            </svg>
            <div class="titleText">户型基本信息</div>
          </div>

          <van-cell-group inset class="cellGroupCard">
            <zVanCell title="户型信息" :content="apartmentTypeData[showIndex].huXing" />
            <zVanCell title="城市" :content="xiaoQuChengShi" />
            <zVanCell title="建筑面积" :content="apartmentTypeData[showIndex].jianZhuMianJi" />
            <zVanCell title="朝向" :content="apartmentTypeData[showIndex].fangWuChaoXiang" />
            <zVanCell title="建成年代" :content="apartmentTypeData[showIndex].jianChengNianDai" />
            <zVanCell title="楼型" :content="apartmentTypeData[showIndex].louXingName" />
          </van-cell-group>
        </section>

        <section class="houseInfoItemCard indoorEquipmentInfoCard">
          <div class="titleArea">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="23" height="23" style="" filter="none">
              <g>
              <rect x="9" y="4" width="30" height="40" rx="2" stroke="rgba(24,126,255,1)" stroke-width="4" fill="none"></rect><circle cx="24" cy="31" r="6" fill="none" stroke="rgba(24,126,255,1)" stroke-width="4"></circle><path d="M18 12H21" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M18 18H21" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M27 18H30" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
              </g>
            </svg>
            <div class="titleText">室内设备信息</div>
          </div>

          <div class="tableOut">
            <vantTable
              class="table"
              :columns="indoorEquipmentInfoColumns"
              :data="apartmentTypeData[showIndex].shiNeiSheBeiGuanLianList"
              :height="300"
            ></vantTable>
          </div>
        </section>

        <!-- <section class="houseInfoItemCard publicPoolInfoCard">
          <div class="titleArea">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" width="23" height="23" style="" filter="none">
              <g>
              <path d="M512 0c282.766222 0 512 229.233778 512 512s-229.233778 512-512 512S0 794.766222 0 512 229.233778 0 512 0zM234.581333 602.737778L199.111111 726.101333c0 5.461333 0 10.922667 4.067556 13.624889 2.730667 5.404444 8.192 6.712889 13.653333 6.712889l262.115556 1.592889 0.028444-0.056889 93.070222-122.737778-337.464889-22.471111z m366.279111 28.16v0.028444l-95.089777 115.484445h301.425777a17.92 17.92 0 0 0 17.692445-17.578667l-0.398222-1.706667c-0.398222-1.365333-0.995556-2.844444-0.995556-3.697777h0.056889l-15.047111-54.215112-207.644445-38.314666z m170.837334-91.761778c-2.702222 5.404444-6.826667 8.135111-8.135111 13.482667-21.219556 27.932444-42.894222 55.495111-65.080889 82.688l104.448 9.671111zM658.887111 170.666667c-88.007111 0-156.558222 72.220444-156.558222 159.857777 0 67.043556 42.666667 143.132444 78.904889 194.645334 28.501333 40.021333 58.225778 73.528889 71.168 89.031111 1.308444 1.28 3.896889 3.84 6.513778 3.84 1.308444 0 5.12-1.308444 6.428444-3.868445a988.956444 988.956444 0 0 0 71.168-89.002666c36.209778-51.484444 78.961778-127.601778 78.961778-194.616889C816.725333 242.915556 745.557333 170.666667 658.887111 170.666667z m-179.939555 243.370666l-178.972445 5.831111a15.928889 15.928889 0 0 0-14.933333 12.145778l-40.533334 141.511111 347.306667 18.574223c-37.546667-44.657778-60.871111-74.24-69.916444-89.059556-13.937778-22.812444-34.759111-64.568889-42.951111-89.002667z m167.765333-96.824889l20.565333 7.196445c-15.587556 32.227556-31.573333 59.818667-47.985778 82.602667 26.396444-1.706667 52.679111-4.551111 78.819556-8.590223-6.200889-12.600889-12.600889-24.177778-19.228444-34.588444l18.801777-6.4c14.023111 21.390222 26.225778 44.401778 36.408889 68.807111l-19.626666 8.789333c-2.56-6.4-5.176889-12.600889-7.765334-18.631111a1394.545778 1394.545778 0 0 1-115.598222 11.861334l-3.612444-20.451556c13.425778-2.958222 33.194667-33.137778 59.221333-90.595556z m47.587555-67.384888c10.808889 36.010667 29.809778 65.422222 56.974223 88.206222l-14.961778 17.408c-28.643556-24.604444-48.64-56.405333-60.017778-95.573334z m-74.581333 1.621333l19.370667 7.964444c-13.994667 41.614222-32.597333 73.386667-55.580445 95.630223l-16.611555-14.392889c23.808-22.414222 41.415111-52.195556 52.792889-89.201778z" p-id="15664" fill="rgba(24,126,255,1)" stroke="none"></path>
              </g>
            </svg>
            <div class="titleText">公摊信息</div>
          </div>

          <van-cell-group inset class="cellGroupCard">
            <zVanCell title="公摊比例" :content="apartmentTypeData[showIndex].gongTanInfo" />
          </van-cell-group>
        </section> -->

        <section class="houseInfoItemCard unitTypeCard">
          <div class="titleArea">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="23" height="23" style="" filter="none">
              <g>
              <path d="M18 6H8C6.89543 6 6 6.89543 6 8V18C6 19.1046 6.89543 20 8 20H18C19.1046 20 20 19.1046 20 18V8C20 6.89543 19.1046 6 18 6Z" fill="none" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linejoin="round"></path><path d="M18 28H8C6.89543 28 6 28.8954 6 30V40C6 41.1046 6.89543 42 8 42H18C19.1046 42 20 41.1046 20 40V30C20 28.8954 19.1046 28 18 28Z" fill="none" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linejoin="round"></path><path d="M40 6H30C28.8954 6 28 6.89543 28 8V18C28 19.1046 28.8954 20 30 20H40C41.1046 20 42 19.1046 42 18V8C42 6.89543 41.1046 6 40 6Z" fill="none" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linejoin="round"></path><path d="M40 28H30C28.8954 28 28 28.8954 28 30V40C28 41.1046 28.8954 42 30 42H40C41.1046 42 42 41.1046 42 40V30C42 28.8954 41.1046 28 40 28Z" fill="none" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linejoin="round"></path>
              </g>
            </svg>
            <div class="titleText">户型分布</div>
          </div>

          <van-swipe class="unitTypeImageOut" :autoplay="5000" indicator-color="white" lazy-render>
            <van-swipe-item v-for="(item, index) in apartmentTypeData[showIndex].unitTypeImageList" :index="index">
              <img class="unitTypeImage" :src="item" @click="imagePreviewHandler(item)" />
            </van-swipe-item>
          </van-swipe>
        </section>
      </div>
    </div>
  </div>
</template>

<script setup>
import jingZhuangNavBtnImage from '@/assets/img/jingZhuangNavBtnImage.png'
import vantTable from 'vant-table'
import { pageConstant } from '@/config/contant.js'
import { postXiaoQuHuXingDetail } from '@/api/xiaoqu/index.js'
import { useRouter } from 'vue-router'
const router = useRouter()
import { getSelectedXiaoQuId } from '@/config/config.js'
import { sendData } from '@/utils/postData.js'

if (!getSelectedXiaoQuId()) {
  showDialog({
    message: '暂无小区数据，请先配置小区',
  }).then(() => {
    router.back()
  })
}


/**
 * 获取小区户型数据
 */
const indoorEquipmentInfoColumns = ref([
  {
    prop: 'leiBieName',
    title: '类别',
    minWidth: '130px',
  },
  {
    prop: 'caiLiao',
    title: '材料',
    width: '100px',
  },
  {
    prop: 'pinPai',
    title: '品牌',
    width: '100px',
  },
])
const apartmentTypeData = ref([])
const xiaoQuChengShi = ref('')
const loadApartmentTypeDataHandler = () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0
  });

  postXiaoQuHuXingDetail({xiaoQuId: getSelectedXiaoQuId()}).then(res => {
    // 关闭加载中提示
    closeToast();

    if (res.data.code == pageConstant.okCode) {
      apartmentTypeData.value = res.data.data.huXingList
      apartmentTypeData.value.forEach(item => {
        if (item.urls) {
          item.urls = item.urls.split(',')[0]
        }
        if (item.jianZhuMianJi) {
          item.jianZhuMianJi = item.jianZhuMianJi + '㎡'
        }
        if (item.jianChengNianDai && item.jianChengNianDai.slice(-1) !== '年') {
          item.jianChengNianDai = item.jianChengNianDai + '年'
        }
        if (item.gongTanLv && item.comment) {
          item.gongTanInfo = item.gongTanLv + '(' + item.comment + ')'
        }
        if (item.fenBuTuUrls) {
          item.unitTypeImageList = item.fenBuTuUrls.split(',')
        }
      })
      if (res.data.data.xiaoQu && res.data.data.xiaoQu.shiName) {
        xiaoQuChengShi.value = res.data.data.xiaoQu.shiName
      }
    } else {
      showToast(res.data.msg);
    }
  })
  .catch((err) => {
    console.log(err)
  })
}
loadApartmentTypeDataHandler()

/**
 * 顶部轮播图精装查看功能
 */
const showIndex = ref(0)
const houseInfoKey = ref(0)
const getSwipeIndexHandler = (index) => {
  showIndex.value = index
  houseInfoKey.value = houseInfoKey.value + 1
}
const navToJingZhuangHandler = (jingZhuangYangBanGuanLianList) => {
  router.push({
    path: '/jingZhuangYangBan'
  })
  sendData(JSON.stringify(jingZhuangYangBanGuanLianList))
}
const imagePreviewHandler = (url) => {
  showImagePreview([url]);
}
</script>

<style lang="scss" scoped>
.out {
  min-height: 100dvh;
  width: 100vw;
  background-color: rgb(241, 241, 241);

  .pageOut {
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;

    .swipeArea {
      .swipeItemOut {
        display: flex;
        background-color: #fff;
        border-radius: 5px;
        position: relative;

        .apartmentTypeImageOut {
          position: relative;
          margin-left: 40px;

          .apartmentTypeImage {
            object-fit: contain;
            height: 217px;
            width: 182px;
          }

          .directionArea {
            position: absolute;
            top: 5px;
            left: 150px;

            .tipText {
              width: 24px;
              text-align: center;
              font-weight: bold;
              font-size: 12px;
            }

            .directionIcon {
              transform: rotate(0.375turn);
            }
          }
        }

        .tipArea {
          margin-top: 30px;
          margin-left: 10px;

          .tipItem {
            font-size: 14px;
            margin-top: 7px;
            font-weight: bold;
          }
        }

        .jingZhuangNavBtn {
          position: absolute;
          bottom: 3px;
          right: 8px;

          .jingZhuangNavBtnImage {
            height: 30px;
          }
        }
      }
      
      .custom-indicator {
        color: #fff;
        background: rgba(0, 0, 0, .5);
        padding: 4px 5px 2px;
        font-size: 12px;
        position: absolute;
        top: 5px;
        left: 5px;
      }
    }

    .houseInfoArea {
      .houseInfoItemCard {
        // padding: 15px;
        background-color: #fff;
        border-radius: 5px;
        margin-top: 10px;

        .titleArea {
          width: 100%;
          border-bottom: 1px solid #e0e0e0;
          padding: 10px 16px;
          box-sizing: border-box;
          display: flex;

          .titleText {
            line-height: 26px;
            margin-left: 7px;
            font-weight: 600;
          }
        }

        .cellGroupCard {
          margin: 0;
        }

        .tableOut {
          border-radius: 8px;
          overflow: hidden;
          color: #5a5a5a;
          padding: 15px;
          // ::v-deep .vant-table-wrapper {
          //   border: 1px solid #d0d0d0;
          // }

          ::v-deep .vant-th {
            font-size: 14px;
          }
          ::v-deep .vant-td {
            font-size: 16px;
          }
          ::v-deep .vant-td:first-child {
            color: #344054;
          }
        }

        .unitTypeImageOut {
          padding: 15px;
          box-sizing: border-box;

          ::v-deep .van-swipe__track {
            width: 100% !important;

            .van-swipe-item {
              width: 100% !important;
            }
          }

          .unitTypeImage {
            object-fit: contain;
            width: 100%;
            border-radius: 5px;
          }
        }
      }
    }
  }
}
</style>